<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>素材上传</title>
<script type="text/javascript" th:src="@{/js/material/main_material.js}"></script>
<style type="text/css">
	input[type=file]{
		display: none;
	}
</style>
</head>
<body>
	<div id="material_app" style="height:100%;" >


	<el-tabs type="border-card" @tab-click="handleClick" >
	  
	  <el-tab-pane label="首页展示">
	   <div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>素材管理</el-breadcrumb-item>
			  <el-breadcrumb-item>素材上传</el-breadcrumb-item>
			  <el-breadcrumb-item>公司首页</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		<el-row :gutter="20">
		<el-col :span="50">
		<div>
			<el-upload
			  class="upload-demo"
			  drag
			  multiple
			  :limit='20'
			  :file-list="fileList"
			  :action="uploadUrl"
			  :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-upload="beforeAvatarUpload"
			  >
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">{{tip}}</div>
			</el-upload>
		</div>
		</el-col>
		<el-col :span="50">
		<div style="">
			<img th:src="@{/img/homeimg.png}">
		</div>
		</el-col>
		<el-col :span="50">
		<div style="">
			<template>
			  <b><el-span>首页请选择图片尺寸  :  </el-span></b>
			  <el-select id = "selectType" v-model="selectcompy.compycode" value-key="selectcompy.compyDesc" @change="choose(selectcompy.compycode)"  >
			    <el-option
			       v-for="item in items"
				   :key="item.id"
				   :label="item.name"
				   :value="item.id">
			    </el-option>
			  </el-select>
			</template>
		</div>
		</el-col>
		</el-row>
	  </el-tab-pane>
	  <el-tab-pane label="热销产品">
	  <div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>素材管理</el-breadcrumb-item>
			  <el-breadcrumb-item>素材上传</el-breadcrumb-item>
			  <el-breadcrumb-item>热销产品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		<el-row :gutter="20">
		<el-col :span="50">
		<div>
			<el-upload
			  class="upload-demo"
			  drag
			  multiple
			  :limit='20'
			  :file-list="fileList"
			  :action="uploadUrl"
			  :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-upload="beforeAvatarUpload"
			  >
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">{{tip}}</div>
			</el-upload>
		</div>
		</el-col>
		<el-col :span="50">
		<div style="">
			<img th:src="@{/img/sellwellimg.png}">
		</div>
		</el-col>
		
		
		
		</el-row>
	  </el-tab-pane>
	  <el-tab-pane label="全部产品">
	  <div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>素材管理</el-breadcrumb-item>
			  <el-breadcrumb-item>素材上传</el-breadcrumb-item>
			  <el-breadcrumb-item>具体的宝贝产品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		<el-row :gutter="20">
		<el-col :span="50">
		<div>
			<el-upload
			  class="upload-demo"
			  drag
			  multiple
			  :limit='20'
			  :file-list="fileList"
			  :action="uploadUrl"
			  :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-upload="beforeAvatarUpload"
			  >
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">{{tip}}</div>
			</el-upload>
		</div>
		</el-col>
		<el-col :span="50">
		<div style="">
			<img th:src="@{/img/allgoodsimg.png}">
		</div>
		</el-col>
		
	
		
		</el-row>
	  </el-tab-pane>
	</el-tabs>

		
		<br/>
		<div>
			<template>
			
  			 
				<!-- 表格 -->
				<el-table  v-loading="loading" :data="tableData" height="465"  style="width: 100%">
					<el-table-column prop="name" label="素材名称" width="250"></el-table-column>
				    <el-table-column prop="url" label="保存地址" width="250"></el-table-column>
				    <el-table-column prop="createTime" label="保存时间" :formatter="dateFormat" width="200"></el-table-column>
				    <el-table-column prop="creatorTypeDesc" label="素材类型" width="150"></el-table-column>
				    <el-table-column prop="memo" label="素材备注说明" width="150"></el-table-column>
				    <el-table-column label="编辑配置详情">
				      <template slot-scope="scope">
				        <el-button size="mini" plain type="danger" @click.native.prevent="deleteConfig(scope.$index, scope.row,tableData)"> 删除</el-button> 
				      </template>
				    </el-table-column>
				</el-table>
				<!-- 分页 -->
		    	<el-pagination 
		    		background
		    		@size-change="handleSizeChange" 
		    		@current-change="handleCurrentChange" 
		    		:current-page="currentPage" 
		    		:page-sizes="[3,5,10]" 
		    		:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" 
		    		:total="totalSize">
    			</el-pagination>
			</template>
		</div>
	</div>
	

	
	
	
	
</body>
</html>